<template>
  <el-container class="app">
    <el-aside width="auto">
      <el-auto-resizer class="overflow-y-hidden">
        <template #default="{ height }">
          <Sidebar @select="(index: string) => handleNavClick('', index)">
            <el-scrollbar :height="height - 80">
              <SidebarItems :items="items" />
            </el-scrollbar>
          </Sidebar>
        </template>
      </el-auto-resizer>
    </el-aside>
    <el-container>
      <el-header style="--el-header-height: 110px; --el-header-padding: 0">
        <div class="header">
          <div style="display: flex; align-items: center">
            <SidebarCollapseIcon />
            <Breadcrumb />
          </div>
          <el-space :size="10" wrap>
            <!--            <DarkSwitch />-->
            <GrantAuthButton />
            <SyncMarketDataButton />
            <BootstrapButton />
            <Version />
          </el-space>
        </div>
        <NavBar :routes="pageRoutes.routeMap" @click="handleNavClick" />
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <keep-alive :include="cachedRouteNames">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
    <UniverseTypeDrawer ref="universeTypeDrawer" />
  </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElAutoResizer, ElLoading } from "@chulei-ui/element-plus";
import { Breadcrumb, NavBar, Sidebar, SidebarCollapseIcon } from "@chulei-ui/components";
import { cachedRouteNames, pageRoutes } from "../../../routers";
import { usePlanetSchematicsStore } from "../../cache";
import { useMarketStore } from "../../cache/MarketStore";
import { emitter } from "../../bus";
import { useCacheStore } from "../../sde/cache";
import { FileUtils } from "../../utils";
import { FORMATED_TYPE_FILE } from "../../sde";
import { items } from "./use-sidebar";
import { SidebarItems } from "./sidebar-items.js";
import type { ComponentExposed } from "vue-component-type-helpers";
import Version from "~pages/base/components/Version.vue";
import GrantAuthButton from "~pages/base/components/GrantAuthButton.vue";
import SyncMarketDataButton from "~pages/base/components/SyncMarketDataButton.vue";
import UniverseTypeDrawer from "~pages/drawer/UniverseTypeDrawer.vue";
import BootstrapButton from "~pages/base/components/BootstrapButton.vue";
const router = useRouter();
const handleNavClick = (name: string, path: string) => {
  router.push({ path }, false);
};
const universeTypeDrawer = ref<ComponentExposed<typeof UniverseTypeDrawer>>();
const planetSchematicsStore = usePlanetSchematicsStore();
const marketStore = useMarketStore();

const cacheStore = useCacheStore();
onMounted(async () => {
  //很奇怪会进入到这边
  if (!FileUtils.exist(FORMATED_TYPE_FILE)) {
    return;
  }
  const loading = ElLoading.service({
    lock: true,
    text: "加载中",
    background: "rgba(0, 0, 0, 0.7)",
  });
  await cacheStore.init();
  planetSchematicsStore.init();
  marketStore.sync().then();
  loading.close();
  emitter.on("show-type-details", (id) => {
    universeTypeDrawer.value!.show(id);
  });
});
defineOptions({ name: "Home" });
</script>

<style lang="scss">
.app {
  height: 100%;
  width: 100%;

  .el-header {
    .header {
      padding: 0 20px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    box-shadow: var(--el-box-shadow-light);
    border-bottom: var(--el-border);
  }
}

.el-aside {
  box-shadow: var(--el-box-shadow-light);
}
</style>
